<template>
	<view class="content">
		<view class="title">
			注册新账号
		</view>

		<view class="inp">
			<input v-model="phone" maxlength="11" type="text" placeholder="请输入手机号" placeholder-style="color:#CCCCCC">
		</view>

		<view class="inp">
			<input type="text" v-model="password" placeholder="请输入密码" placeholder-style="color:#CCCCCC">
		</view>
		<view class="inp">
			<input type="text" v-model="yzm" placeholder="图形验证码" placeholder-style="color:#CCCCCC">
			<text>1234</text>
		</view>
		<view class="inp">
			<input v-model="dxyzm" type="text" placeholder="短信验证码" placeholder-style="color:#CCCCCC">
			<text v-if="flag" @tap="send" style="color:red;">获取验证码</text>
			<text class="time" v-else ref="munber">请在{{number}}秒后发送</text>
		</view>

		<view class="inp">
			<input v-model="tjm" type="text" placeholder="推荐码(选填)" placeholder-style="color:#CCCCCC">
		</view>


		<view class="btn">
			<button :style="{backgroundColor:bg}" @tap="zhuce" type="warn">立即注册</button>
		</view>

		<view class="btn">
			<navigator style="float: right;color: red;" open-type="switchTab" url="/pages/login/login">已有账号？去登录
			</navigator>
		</view>
		<u-logo></u-logo>
	</view>
</template>

<script>
	import logo from '../../components/logo.vue'
	export default {
		components: {
			'u-logo': logo
		},
		data() {
			return {
				flag: true,
				number: 10,
				bg: '#F27F88',
				phone: '', //手机号
				password: '', //密码
				yzm: '', //验证码
				dxyzm: '', //短信验证码
				tjm: "", //推荐吗
			}
		},
		methods: {
			send() {
				var time = null
				this.flag = false,
					uni.showToast({
						title: '获取成功'
					});
				var time = setInterval(() => {
					if (this.number !== 0) {
						this.number--
					} else {
						this.flag = true
						this.number = 10
						clearInterval(time)
					}
				}, 1000)
			}, //获取验证码
			zhuce() {
				uni.request({
					withCredentials: false,
					method: "POST",
					url: 'http://localhost:5000/register?',
					data:{
						name:this.phone,
						password:this.password
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: res => {
						console.log(res)
						if(res.data.error == '已存在'){
							uni.showToast({	
								title:'该账号已存在',
								icon:"none",
							})
						}else{
							uni.showToast({
								title:'注册成功',
								icon:"success",
								success:() =>{
									setTimeout(()=>{
										uni.redirectTo({
											url:'../login/login'
										})
									},1000)
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}, //注册
		},
		watch: {
			phone(nw, old) {
				if (nw !== '') {
					this.bg = 'red'
				} else {
					this.bg = '#F27F88'
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.title {
		font-size: 50upx;
		margin-top: 60upx;
		margin-left: 60upx;
		margin-bottom: 60upx;
		font-weight: bold;
		color: #444444;
	}

	.inp {
		height: 90upx;
		width: 625upx;
		margin: 0 auto;
		border-bottom: 1px solid #DADADA;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn {
		width: 625upx;
		margin: 0 auto;
		margin-top: 57upx;

	}
</style>
